import React from 'react';
import { useIntl } from 'umi';
import { Alert, Table } from 'antd';
import style from './index.less';

const data = [
  {
    currency: 'CNY',
    balance: '22121.12',
    mechanism: '北京',
  },
];

const AccountFrozen: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const columns = [
    {
      // title: '币种',
      title: () => <>{t('form.currency')}</>,
      dataIndex: 'currency',
      key: 'currency',
      align: 'center',
    },
    {
      // title: '余额',
      title: () => <>{t('form.balance')}</>,
      dataIndex: 'balance',
      key: 'balance',
      align: 'center',
    },
    {
      // title: '所在机构',
      title: () => <>{t('form.Affiliatedinstitution')}</>,
      key: ' mechanism',
      dataIndex: 'mechanism',
      align: 'center',
    },
  ];
  return (
    <div className={style.AccountiDetailboss}>
      <div className={style.accountmineform}>
        <Alert
          style={{ textAlign: 'left' }}
          message="说明:"
          description="资金冻结状态通常是由于您的资金正在向外付款或正在结汇，订单处理完成后即会解冻或扣减。"
          type="warning"
          showIcon
        />
      </div>
      <div className={style.accountdetailtable}>
        <Table
          columns={columns}
          size="middle"
          scroll={{
            x: 1000,
            // y: 400,
          }}
          pagination={{
            showSizeChanger: true,
            onChange: (page, pageSize) => {
              // console.log("page, pageSize", page, pageSize);
            },
            defaultPageSize: 8,
            showTitle: true,
            responsive: true,
          }}
          dataSource={data}
        />
      </div>
    </div>
  );
};

export default AccountFrozen;
